<template>

	<view class="service">
		
		<u-navbar :is-back="false" title="服务"  
					:border-bottom="false" 
					:background="navbarBackground" 
					title-color="#000"
					title-size="37"
					>
			<view class="navbar__right" slot="right">
				<view class="navbar__right__setting" @click="scan()">
					<u-icon name="search" size="45"></u-icon>
				</view>
				<view class="navbar__right__setting" @click="scan()">
					<u-icon name="more-dot-fill" size="45"></u-icon>
				</view>
			</view>

		</u-navbar>

		
<!-- 		<u-sticky bg-color="none" @fixed="stickTop=true" @unfixed="stickTop=false">
			<view class="search-box" @click="toSearch" v-if="stickTop">
				<view class="search-box__inner" >
					<u-icon name="search" ></u-icon>
					<text class="search-box__text">搜索您需要的服务</text>
				</view>
			</view>
			<view v-else class="search-box--nonebg" @click="toSearch">
				<view class="search-box__inner" >
					<u-icon name="search" ></u-icon>
					<text class="search-box__text">搜索您需要的服务</text>
				</view>
			</view>
		</u-sticky> -->
		<view class="service__box" v-for="(service,index) in serviceList">
			<view class="service__box__title">{{service.type}}</view>
			<view class="service__box__grid">
				<u-grid :col="4" :border="false">
					<u-grid-item @click="toPage(service.path)" v-for="(service,index) in service.serviceList ">
						<image class="service__box__grid__icon" :src="service.icon" mode="aspectFit"></image>
						<view class="service__box__grid__name">{{service.serviceName}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view class="service__box">
			<view class="service__box__title">生活服务</view>
			<view class="service__box__grid">
				<u-grid :col="4" :border="false">
					<u-grid-item @click="toPage(service.path)" v-for="(service,index) in parkServices ">
						<image class="service__box__grid__icon" :src="service.icon" mode="aspectFit"></image>
						<view class="service__box__grid__name">{{service.serviceName}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
<!-- 		<view class="service__list">
			<view class="service__list__tabs">
			 <u-tabs-swiper ref="uTabs" :list="serviceList" :current="tabsCurrent" @change="tabsChange" :is-scroll="false"
			 :heght="20"
			  swiperWidth="750"
			  bar-width="150"
			  
			  active-color="#0d174f"
			  ></u-tabs-swiper>
			</view>
			<swiper class="service__list__swiper" :current="tabsSwiperCurrent" @transition="transition" @animationfinish="animationfinish"
				>
				<swiper-item  v-for="(services,index) in serviceList" :key="index" >
					<scroll-view scroll-y  @scrolltolower="onreachBottom">
						<view class="service__list__type" v-for="(serviceType,index) in services.serviceTypeList">
							<view class="service__list__typename">{{serviceType.type}}</view>
							<u-grid :col="4" :border="false">
								<u-grid-item  v-for="(service,index) in serviceType.serviceList" :key="index">
									
									<image class="service__list__func__icon" :src="service.icon" mode="aspectFit"></image>
									<view class="service__list__func__name">{{service.serviceName}}</view>
								</u-grid-item>
							</u-grid>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		 -->
		<u-tabbar :list="this.$store.state.tabbarList" 
			:active-color="this.$store.state.tabbarConfig.activeColor"
			:inactive-color="this.$store.state.tabbarConfig.inactiveColor"
			:border-top="this.$store.state.tabbarConfig.borderTop"	></u-tabbar>
	</view>
</template>

<script>

	import store from "./store.js"
	export default {
		data() {
			return {
				serviceList:store.state.serviceList,
				commonServices:store.state.commonServices,
				parkServices:store.state.parkServices,
				tabsCurrent:0,
				tabsSwiperCurrent:0,

				stickTop:false,
			}
		},
		computed:{
			navbarBackground:function(){
				
				if(!this.stickTop){
					return {
						backgroundColor: '#fff',
					}
				}else{
					return 	{
						backgroundColor: '#fff',
					}
				}
			}
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.tabsSwiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
					
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.tabsSwiperCurrent = current;
				this.tabsCurrent = current;

			},
			// scroll-view到底部加载更多
			onreachBottom() {
			
			},
			toSearch(){
				console.log("pp")
				 uni.navigateTo({
					 url:"/pages/core/service/serverSearch",
					 fail: (res) => {
						 console.log(res)
					 }
				 })
			},
			toPage(path){
				uni.navigateTo({
					url:path
				})
			}

		}
	}
</script>


<style lang="less">
.navbar{
	&__right{
		display: flex;
		flex-direction: row;
		margin-right: @uni-spacing-col-base;
		margin-left: auto;
		
		&__scan{
			font-size: @uni-font-size-x-lg;
			margin-left: @uni-spacing-col-base;
			margin-right: @uni-spacing-col-base;
		}
		&__setting{
			font-size: @uni-font-size-x-lg;
			margin-left: @uni-spacing-col-base;
			margin-right: @uni-spacing-col-base;
			&__icon {
				width:@icon-lg;
				height: @icon-lg;
			}
		}
	}
}
.search-box {
	padding: @uni-spacing-row-sm @uni-spacing-col-lg;
	
	background-color: #fff;
	transition: all 0.5s;
	&--nonebg{
		padding: @uni-spacing-row-sm @uni-spacing-col-lg;
		background-color: transparent;
		margin-bottom: @uni-spacing-row-lg;
	}
	&__inner {

		border-radius: @uni-border-radius-lg;
		display: flex;
		align-items: center;
		padding: @uni-spacing-row-sm @uni-spacing-col-lg;
		border: 1px solid rgba(65, 104, 167, 0.6);
		// background-color: rgba(255, 255, 255, 0.4);
	}
	&__text {
		color:@font-color-grey;
		margin-left: 10rpx;
	}
}

.service{
	// background-image: url("/static/background/server.png") ;
	// background-size:contain;
	// background-repeat:no-repeat;
	background-color: @uni-bg-color-grey;
	height: calc(100vh);
	&__box{
		display: flex;
		flex-direction: column;
		margin-top: @uni-spacing-row-sm;
		padding-left: @uni-spacing-col-lg;
		padding-right: @uni-spacing-col-lg;
		padding-top: @uni-spacing-row-lg;
		padding-bottom: @uni-spacing-row-lg;
		background-color: #fff;
		border-radius: @uni-border-radius-lg;
		&__title{
			margin-left: @uni-spacing-col-base;
			font-size: @uni-font-size-lg;
			font-weight: bold;
			color: @font-color-grey;
		}
		&__grid {
			&__icon {
				width: @func-icon-size-base;
				height: @func-icon-size-base;
				margin: @uni-spacing-row-lg;
			}
			&__name{
				
			}
		}
	}
}






	
</style>
